
<cly-datatable-n :rows="preparedRows" v-loading="loadingState" :force-loading="loadingState" :persist-key="ratingsTablePersistKey">
    <template v-slot="scope">
        <el-table-column sortable="true" prop="rating" :label="i18n('feedback.rating')">
            <template v-slot="rowScope">
                <span class="text-medium">
                  <span :class="'rating-color rating-color-' + rowScope.row.rating"></span> {{ rowScope.row.rating + 1 }}
                </span>
            </template>
        </el-table-column>
        <el-table-column sortable="true" prop="count" :label="i18n('feedback.number-of-ratings')">
          <template v-slot="rowScope">
              <span class="text-medium">
                {{ rowScope.row.count }}
              </span>
          </template>
        </el-table-column>
        <el-table-column sortable="true" prop="percentage" :label="i18n('feedback.percentage')">
          <template v-slot="rowScope">
              <span class="text-medium">
                {{ rowScope.row.percent }}%<span :style="{ width: rowScope.row.percent + 'px'}" :class="'rating-color rating-color-' + rowScope.row.rating"></span>
              </span>
          </template>
        </el-table-column>
    </template>
</cly-datatable-n>
